<template>
  <div class="message-detail-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>消息详情</span>
        <el-button 
          v-if="message" 
          style="float: right; padding: 3px 0" 
          type="text" 
          @click="goBack"
        >
          返回
        </el-button>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <i class="el-icon-loading"></i>
        <span>加载中...</span>
      </div>
      
      <!-- 消息内容 -->
      <div v-else-if="message" class="message-content">
        <div class="message-header">
          <div class="message-title">{{ message.title }}</div>
          <div class="message-time">
            <i class="el-icon-time"></i>
            {{ formatTime(message.time) }}
          </div>
        </div>
        <div class="message-divider"></div>
        <div class="message-body" v-html="message.content"></div>
      </div>
      
      <!-- 无消息状态 -->
      <div v-else class="no-message">
        <i class="el-icon-document-delete"></i>
        <p>未找到该消息</p>
        <el-button type="primary" size="small" @click="goBack">
          返回列表
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MessageDetail',
  data() {
    return {
      message: null,
      loading: false
    };
  },
  created() {
    this.loadMessage();
  },
  watch: {
    '$route.query': {
      handler() {
        this.loadMessage();
      },
      deep: true
    }
  },
  methods: {
    loadMessage() {
      // 优先从路由参数中获取消息对象
      const messageStr = this.$route.query.message;
      const messageId = this.$route.query.messageId;
      
      if (messageStr) {
        try {
          // 解析消息对象
          this.message = JSON.parse(messageStr);
          console.log('从路由参数获取消息:', this.message);
          return;
        } catch (error) {
          console.error('解析消息对象失败:', error);
        }
      }
      
      if (messageId) {
        // 如果没有消息对象，根据ID从后端获取
        this.getMessageDetail(messageId);
      }
    },
    
    getMessageDetail(messageId) {
      this.loading = true;
      this.$request.get(`/messageBox/detail/${messageId}`)
        .then(res => {
          if (res && res.data) {
            this.message = res.data;
            console.log('从后端获取消息详情:', this.message);
          }
        })
        .catch(error => {
          console.error('获取消息详情失败:', error);
          this.$message.error('获取消息详情失败，请重试');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    formatTime(time) {
      if (!time) return '';
      
      // 处理时间戳格式
      if (typeof time === 'number') {
        return new Date(time).toLocaleString('zh-CN');
      }
      
      // 处理字符串格式的时间
      return new Date(time).toLocaleString('zh-CN');
    },
    
    goBack() {
      // 返回上一页或跳转到消息列表
      if (window.history.length > 1) {
        this.$router.go(-1);
      } else {
        this.$router.push('/fullMsg');
      }
    }
  }
};
</script>

<style scoped>
.message-detail-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.box-card {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.loading-container {
  text-align: center;
  padding: 50px 0;
  color: #909399;
}

.loading-container i {
  font-size: 24px;
  margin-right: 8px;
}

.message-content {
  padding: 20px 0;
}

.message-header {
  margin-bottom: 20px;
}

.message-title {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
  line-height: 1.4;
}

.message-time {
  font-size: 13px;
  color: #909399;
  display: flex;
  align-items: center;
}

.message-time i {
  margin-right: 4px;
}

.message-divider {
  height: 1px;
  background-color: #e4e7ed;
  margin: 20px 0;
}

.message-body {
  font-size: 15px;
  line-height: 1.8;
  color: #606266;
  word-wrap: break-word;
  word-break: break-all;
}

.no-message {
  text-align: center;
  padding: 60px 0;
  color: #909399;
}

.no-message i {
  font-size: 48px;
  color: #dcdfe6;
  margin-bottom: 16px;
}

.no-message p {
  margin-bottom: 20px;
  font-size: 16px;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .message-detail-container {
    padding: 10px;
  }
  
  .message-title {
    font-size: 18px;
  }
  
  .message-body {
    font-size: 14px;
  }
}
</style>